<template>
  <div>
    <div class="index_header" v-if="this.$store.state.user.roleName === '管理员'">
      <ul>
        <li @click="handleOpenDialog">
          <el-tooltip class="tip" effect="dark" content="显示个人信息" placement="top">
            <i class="el-icon-document"></i>
            <label style="border:none">个人中心</label>
          </el-tooltip>
        </li>
        <li @click="goAskForLeaveHandle">
          <el-tooltip class="tip" effect="dark" content="处理学生请假申请入口" placement="top">
            <el-badge :value="countNumber.vecateNumber" class="badgeBox" type="warning">
              <i class="el-icon-first-aid-kit"></i>
              <label>请假审核</label>
            </el-badge>
          </el-tooltip>
        </li>
        <li @click="goQuitClassHandle">
          <el-tooltip class="tip" effect="dark" content="处理学生退班申请入口" placement="top">
            <el-badge :value="countNumber.quitNumber" class="badgeBox" type="danger">
              <i class="el-icon-remove-outline"></i>
              <label>退班审核</label>
            </el-badge>
          </el-tooltip>
        </li>
        <li @click="goTransferClassHandle">
          <el-tooltip class="tip" effect="dark" content="处理学生转班申请入口" placement="top">
            <el-badge :value="countNumber.transferNumber" class="badgeBox" type="danger">
              <i class="el-icon-sort"></i>
              <label>转班审核</label>
            </el-badge>
          </el-tooltip>
        </li>
        <li @click="goUserRoleHandle">
          <el-tooltip class="tip" effect="dark" content="处理用户未分配角色入口" placement="top">
            <el-badge>
              <i class="el-icon-d-caret"></i>
              <label>用户角色</label>
            </el-badge>
          </el-tooltip>
        </li>
        <li @click="goStudentClassHandle">
          <el-tooltip class="tip" effect="dark" content="处理学生未分配班级入口" placement="top">
            <el-badge>
              <i class="el-icon-d-caret"></i>
              <label>学生班级</label>
            </el-badge>
          </el-tooltip>
        </li>
        <li @click="goClassCourseHandle">
          <el-tooltip class="tip" effect="dark" content="处理班级未分配课程入口" placement="top">
            <el-badge>
              <i class="el-icon-d-caret"></i>
              <label>班级课程</label>
            </el-badge>
          </el-tooltip>
        </li>
        <li @click="goTeacherCourseHandle">
          <el-tooltip class="tip" effect="dark" content="处理课程未分配老师入口" placement="top">
            <el-badge>
              <i class="el-icon-d-caret"></i>
              <label>课程老师</label>
            </el-badge>
          </el-tooltip>
        </li>
      </ul>
    </div>

<div class="index_header" v-if="this.$store.state.user.roleName === '辅导员'">
      <ul>
        <li @click="handleOpenDialog">
          <el-tooltip class="tip" effect="dark" content="显示个人信息" placement="top">
            <i class="el-icon-document"></i>
            <label style="border:none">个人中心</label>
          </el-tooltip>
        </li>
        <li @click="goAskForLeaveHandle">
          <el-tooltip class="tip" effect="dark" content="处理学生请假申请入口" placement="top">
            <el-badge :value="countNumber.vecateNumber" class="badgeBox" type="warning">
              <i class="el-icon-first-aid-kit"></i>
              <label>请假审核</label>
            </el-badge>
          </el-tooltip>
        </li>
        <li @click="goQuitClassHandle">
          <el-tooltip class="tip" effect="dark" content="处理学生退班申请入口" placement="top">
            <el-badge :value="countNumber.quitNumber" class="badgeBox" type="danger">
              <i class="el-icon-remove-outline"></i>
              <label>退班审核</label>
            </el-badge>
          </el-tooltip>
        </li>
        <li @click="goTransferClassHandle">
          <el-tooltip class="tip" effect="dark" content="处理学生转班申请入口" placement="top">
            <el-badge :value="countNumber.transferNumber" class="badgeBox" type="danger">
              <i class="el-icon-sort"></i>
              <label>转班审核</label>
            </el-badge>
          </el-tooltip>
        </li>

      </ul>
    </div>

    <div class="index_header" v-if="this.$store.state.user.roleName === '学生'">
      <ul>
        <li @click="handleOpenDialog">
          <el-tooltip class="tip" effect="dark" content="查看个人信息" placement="top">
            <i class="el-icon-document"></i>
            <label>个人中心</label>
          </el-tooltip>
        </li>
        <li @click="handleOpenTable">
          <el-tooltip class="tip" effect="dark" content="查看我的课程信息" placement="top">
            <i class="el-icon-s-management"></i>
            <label>我的课程</label>
          </el-tooltip>
        </li>
        <li @click="goCourseTable">
          <el-tooltip class="tip" effect="dark" content="查看课程表" placement="top">
            <i class="el-icon-date"></i>
            <label>课程安排</label>
          </el-tooltip>
        </li>
        <li @click="handleAdd">
          <el-tooltip class="tip" effect="dark" content="打卡签到" placement="top">
            <i class="el-icon-s-claim"></i>
            <label>今日签到</label>
          </el-tooltip>
        </li>
        <li @click="goAskForLeave">
          <el-tooltip class="tip" effect="dark" content="请假申请入口" placement="top">
            <i class="el-icon-first-aid-kit"></i>
            <label>请假申请</label>
          </el-tooltip>
        </li>
        <li @click="goTransferClass">
          <el-tooltip class="tip" effect="dark" content="转班申请入口" placement="top">
            <i class="el-icon-sort"></i>
            <label>转班申请</label>
          </el-tooltip>
        </li>
        <li @click="goQuitClassPanel">
          <el-tooltip class="tip" effect="dark" content="退班申请入口" placement="top">
            <i class="el-icon-remove-outline"></i>
            <label>退班申请</label>
          </el-tooltip>
        </li>
      </ul>
    </div>

  <div class="index_header" v-if="this.$store.state.user.roleName === '老师'">
      <ul>
        <li @click="handleOpenDialog">
          <el-tooltip class="tip" effect="dark" content="查看个人信息" placement="top">
            <i class="el-icon-document"></i>
            <label>个人中心</label>
          </el-tooltip>
        </li>
        <li @click="handleOpenTeacherTable">
          <el-tooltip class="tip" effect="dark" content="查看我的课程信息" placement="top">
            <i class="el-icon-s-management"></i>
            <label>我的课程</label>
          </el-tooltip>
        </li>
        <li @click="goCourseTable">
          <el-tooltip class="tip" effect="dark" content="查看课程表" placement="top">
            <i class="el-icon-date"></i>
            <label>课程安排</label>
          </el-tooltip>
        </li>
         <li @click="goEmployment">
          <el-tooltip class="tip" effect="dark" content="就业推荐入口" placement="top">
            <i class="el-icon-date"></i>
            <label>就业推荐</label>
          </el-tooltip>
        </li>

      </ul>
    </div>

    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <i class="el-icon-user-solid"></i>
          <label>所有用户:</label>
          <span>{{countNumber.userAllNumber}}</span>&nbsp;&nbsp;人
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <i class="el-icon-user-solid"></i>
          <label>学生用户:</label>
          <span>{{countNumber.userRoleNumber.student}}</span>&nbsp;&nbsp;人
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <i class="el-icon-user-solid"></i>
          <label>老师用户:</label>
          <span>{{countNumber.userRoleNumber.teacher}}</span>&nbsp;&nbsp;人
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <i class="el-icon-user-solid"></i>
          <label>在线用户:</label>
          <span>{{this.$store.state.count}}</span>&nbsp;&nbsp;人
        </div>
      </el-col>
    </el-row>

    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="(item,i) in cardData" :key="i" :index="i">
        <div class="carousel_card">
          <legend>{{item.label}}</legend>
          <img :src="item.poster" />
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
    <!-- <el-calendar>
      <template slot="dateCell" slot-scope="{date, data}">
        <p
          :class="data.isSelected ? 'is-selected' : ''"
        >{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}</p>
      </template>
    </el-calendar> -->

    <el-drawer :visible.sync="dialog" direction="rtl" custom-class="demo-drawer" ref="drawer">
      <div class="demo-drawer__content">
        <el-form :model="userForm">
          <el-form-item label="账号" :label-width="formLabelWidth">
            <el-input v-model="userForm.userName"></el-input>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="userForm.nickName"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-input v-model="userForm.sex"></el-input>
          </el-form-item>
          <el-form-item label="手机" :label-width="formLabelWidth">
            <el-input v-model="userForm.telephone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="userForm.email"></el-input>
          </el-form-item>
          <el-form-item label="生日" :label-width="formLabelWidth">
            <el-input v-model="userForm.birthday"></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">返回</el-button>
          <el-button type="primary" @click="handleUpdate">修改</el-button>
        </div>
      </div>
    </el-drawer>

    <el-drawer title="我的课程" :visible.sync="tableDialog" direction="rtl" size="50%">
      <el-table :data="courseInfoData">
        <el-table-column property="classTypeName" label="班级类型"></el-table-column>
        <el-table-column property="className" label="班级名称"></el-table-column>
        <el-table-column property="courseTypeName" label="课程类型"></el-table-column>
        <el-table-column property="courseName" label="课程名称"></el-table-column>
      </el-table>
    </el-drawer>

    <el-drawer title="我的课程" :visible.sync="tableTeacherDialog" direction="rtl" size="30%">
      <el-table :data="courseTeacherInfoData">
        <el-table-column property="courseTypeName" label="课程类型"></el-table-column>
        <el-table-column property="courseName" label="课程名称"></el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'Appindex',
  data () {
    return {
      value: new Date(),
      dialog: false,
      tableDialog: false,
      tableTeacherDialog: false,
      userInfoData: [],
      courseInfoData: [],
      courseTeacherInfoData: [],
      cardData: [
        {
          label: 'Excel数据导入导出。简单操作 轻松高效',
          poster: require('../../assets/excel2019.jpg')
        },
        {
          label: '学生考勤可在线请假申请,实时审核',
          poster: require('../../assets/考勤.png')
        },
        {
          label: '费用信息，可实时查看账单信息',
          poster: require('../../assets/费用.png')
        },
        {
          label: '无纸化管理——方便、快捷、高效',
          poster: require('../../assets/xiaolu.jpg')
        }
      ],
      userForm: {
        userId: '',
        userName: '',
        nickName: '',
        sex: '',
        telephone: '',
        birthday: '',
        email: '',
        comment: '',
        recordTime: '',
        updateTime: ''
      },
      countNumber: {
        userAllNumber: '',
        userRoleNumber: {
          admin: '',
          student: '',
          teacher: ''
        },
        vecateNumber: '',
        quitNumber: '',
        transferNumber: ''
      },
      formLabelWidth: '70px',
      addForm: {
        userId: this.$store.state.user.userId,
        attendanceTime: new Date(),
        attendanceStatus: '已打卡'
      }
    }
  },
  created () {
    this.userData()
    this.courseData()
    this.courseTeacherData()
    this.handleCount()
  },
  methods: {
    handleAdd: function () {
      // 执行添加考勤方法
      // this.addMenuFormVisible = false
      // alert(JSON.stringify(this.form))
      if (this.addForm != null) {
        this.$axios
          .post('/attendances', {
            json: this.addForm
          })
          .then(response => {
            if (response.data.code === 200) {
              setTimeout(() => {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
              }, 300)
            } else {
              this.$message({
                message: '添加失败',
                type: 'warning'
              })
            }
          })
          .catch(function (error) {
            // 请求失败处理
            console.log(error)
          })
      }
    },
    goEmployment () {
      // 用户角色分配页面
      this.$router.replace('/recommendPanel')
    },
    goUserRoleHandle () {
      // 用户角色分配页面
      this.$router.replace('/userRoleAllocation')
    },
    goStudentClassHandle () {
      // 学生班级分配页面
      this.$router.replace('/studentClassAllocation')
    },
    goClassCourseHandle () {
      // 班级课程分配页面
      this.$router.replace('/classCourseAllocation')
    },
    goTeacherCourseHandle () {
      // 课程老师分配页面
      this.$router.replace('/teacherCourseAllocation')
    },
    goAskForLeaveHandle () {
      // 请假管理页面
      this.$router.replace('/askForLeaveManagement')
    },
    goQuitClassHandle () {
      // 退班管理页面
      this.$router.replace('/quitClassManagement')
    },
    goTransferClassHandle () {
      // 转班管理页面
      this.$router.replace('/transferClassManagement')
    },
    goAskForLeave () {
      // 点击跳转至请假申请模板
      this.$router.replace('/askForLeavePanel')
    },
    goQuitClassPanel () {
      // 点击跳转至退班模板
      this.$router.replace('/quitClassPanel')
    },
    goTransferClass () {
      // 点击跳转至转班模板
      this.$router.replace('/transferClassPanel')
    },
    goCourseTable () {
      // 点击跳转至转班模板
      this.$router.replace('/courseTable')
    },
    handleCount () {
      this.calculateUserNumber()
      this.calculateUserNumberByRole()
      this.calculateVecateNumber()
      this.calculateTransferClassNumber()
      this.calculateQuitClassNumber()
      // alert(JSON.stringify(this.countNumber))
    },
    handleOpenTable () {
      this.tableDialog = true
    },
    handleOpenTeacherTable () {
      this.tableTeacherDialog = true
    },
    handleOpenDialog () {
      this.dialog = true
      // alert(JSON.stringify(this.userInfoData))
      this.userForm = this.userInfoData[0]
      this.userForm.userId = this.userInfoData[0].user_Id
      this.userForm.userName = this.userInfoData[0].account
    },
    handleUpdate: function () {
      // 执行更新操作方法
      this.dialog = false
      if (this.userForm != null) {
        this.$axios
          .put('/users', {
            json: this.userForm
          })
          .then(response => {
            if (response.data.code === 200) {
              setTimeout(() => {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })

                this.userData()
              }, 300)
            } else {
              this.$message({
                message: '修改失败',
                type: 'warning'
              })
            }
          })
          .catch(function (error) {
            // 请求失败处理
            console.log(error)
          })
      }
    },
    cancelForm () {
      this.loading = false
      this.dialog = false
      clearTimeout(this.timer)
    },
    userData () {
      // 初始化数据
      this.$axios
        .get('/userInfo/' + this.$store.state.user.userId)
        .then(response => (this.userInfoData = response.data.data))
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },
    courseData () {
      // 初始化学生课程数据
      if (this.$store.state.user.roleName === '学生') {
        this.$axios
          .get('/courseInfo/' + this.$store.state.user.userId)
          .then(response => (this.courseInfoData = response.data.data))
          .catch(function (error) {
          // 请求失败处理
            console.log(error)
          })
      }
    },
    courseTeacherData () {
      // 初始化课程老师数据
      if (this.$store.state.user.roleName === '老师') {
        this.$axios
          .get('/courseTeacherInfo/' + this.$store.state.user.userId)
          .then(response => (this.courseTeacherInfoData = response.data.data))
          .catch(function (error) {
          // 请求失败处理
            console.log(error)
          })
      }
    },
    calculateUserNumber () {
      this.$axios
        .get('/calculateUser')
        .then(
          response =>
            (this.countNumber.userAllNumber = response.data.data[0].userNumber)
        )
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },
    calculateUserNumberByRole () {
      this.$axios
        .get('/calculateUserByRole')
        .then(
          response => (this.countNumber.userRoleNumber = response.data.data[0])
        )
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },
    calculateVecateNumber () {
      this.$axios
        .get('/calculateVecate')
        .then(
          response =>
            (this.countNumber.vecateNumber = response.data.data[0].vecateNumber)
        )
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },
    calculateQuitClassNumber () {
      this.$axios
        .get('/calculateQuit')
        .then(
          response =>
            (this.countNumber.quitNumber =
              response.data.data[0].quitClassNumber)
        )
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },
    calculateTransferClassNumber () {
      this.$axios
        .get('/calculateTransfer')
        .then(
          response =>
            (this.countNumber.transferNumber =
              response.data.data[0].transferClassNumber)
        )
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    }
  }
}
</script>

<style scoped>
.tip {
  width: auto;
  height: 50px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.badgeBox {
  width: auto;
  border: none;
  height: 50px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
}
.carousel_card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.carousel_card legend {
  width: 100%;
  height: 50px;
  display: flex;
  border: none;
  justify-content: flex-start;
  align-items: center;
  font-family: "微软雅黑";
  font-size: 20px;
  font-weight: bold;
}
.carousel_card img {
  width: 100%;
  height: 150px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #c8e6c9;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #b2ebf2;
}

.el-row {
  margin-bottom: 20px;
  /* &:last-child {
      margin-bottom: 0;
    } */
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #b39ddb;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border: none;
  border-radius: 4px;
  min-height: 40px;
  padding-left: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: white;
  cursor: pointer;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.grid-content span {
  margin-top: 5px;
  color: darkblue;
  margin-left: 10px;
  font-family: "Courier New", Courier, monospace;
  font-size: 32px;
  font-weight: bold;
}
a {
  text-decoration: none;
  color: white;
}
.index_header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.index_header ul {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.index_header ul li {
  width: 100px;
  height: 50px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  margin-left: -30px;
  border-radius: 10px;
  background-color: #81d4fa;
}
.index_header ul li:hover {
  cursor: pointer;
  background-color: #0d47a1;
  color: white;
}
.index_header ul li:not(:first-child) {
  margin-left: 20px;
}
.is-selected {
  color: #1989fa;
}
</style>
